<template>
  <div class="demo">
    <div class="iconlist">
      <div v-for="(item, index) in list" :key="index" class="single">
        <i :class="`iconfont ${item.name}`" />
        <p>{{ item.title }}</p>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  components: {},
  data() {
    return {
      list: [
        { name: 'icon-hzcx', title: '手机查询' },
        { name: 'icon-hbgy', title: '环保公益' },
        { name: 'icon-hs', title: '汇算' },
        { name: 'icon-hy', title: '婚姻' },
        { name: 'icon-jiayou', title: '加油' },
        { name: 'icon-jkdj', title: '健康登记' },
        { name: 'icon-jiaojing', title: '交警' },
        { name: 'icon-jiaoyu', title: '教育' },
        { name: 'icon-jubao', title: '举报' },
        { name: 'icon-kjzm', title: '开证明' },
        { name: 'icon-jilu', title: '历史记录' },
        { name: 'icon-pcs', title: '派出所' },
        { name: 'icon-peixun', title: '培训' },
        { name: 'icon-piaoquan', title: '票券' },
        { name: 'icon-qiyefuwu', title: '企业服务' },
        { name: 'icon-qianzheng', title: '签证' },
        { name: 'icon-qianbao', title: '钱包' },
        { name: 'icon-shangbiao', title: '商标' },
        { name: 'icon-shezhi', title: '设置' },
        { name: 'icon-shebao', title: '社保' },
        { name: 'icon-fuw', title: '社区服务' },
        { name: 'icon-zuofei', title: '作废' },
        { name: 'icon-id', title: '身份证' },
        { name: 'icon-shenpi', title: '审批' },
        { name: 'icon-smzx', title: '市民中心' },
        { name: 'icon-shouji', title: '手机' },
        { name: 'icon-shuji', title: '书籍' },
        { name: 'icon-tongbu', title: '数据同步' },
        { name: 'icon-shuiwu', title: '税务' },
        { name: 'icon-tianbao', title: '填报' },
        { name: 'icon-tingche', title: '停车' },
        { name: 'icon-tongzhi', title: '通知公告' },
        { name: 'icon-toubiao', title: '投标' },
        { name: 'icon-wenti', title: '文体' },
        { name: 'icon-caiji', title: '信息采集' },
        { name: 'icon-xueli', title: '学历' },
        { name: 'icon-jiaofei', title: '医保缴费' },
        { name: 'icon-yibaoka', title: '医保卡' },
        { name: 'icon-baoxian', title: '医疗保险' },
        { name: 'icon-yiyuan', title: '医疗机构' },
        { name: 'icon-yqfw', title: '疫情服务' },
        { name: 'icon-yinhang', title: '银行' },
        { name: 'icon-yinsijimi', title: '隐私机密' },
        { name: 'icon-quan', title: '优惠券' },
        { name: 'icon-yuyue', title: '预约' },
        { name: 'icon-jiedu', title: '政策解读' },
        { name: 'icon-zhihuitingche', title: '难点解答' },
        { name: 'icon-zixun', title: '咨询' },
        { name: 'icon-zixun1', title: '资讯' },
        { name: 'icon-zonghe', title: '综合政务' },
        { name: 'icon-zuzhi', title: '组织' },
        { name: 'icon-aqjf', title: '安全缴费' },
        { name: 'icon-ajsp', title: '案件审批' },
        { name: 'icon-banshui', title: '办税' },
        { name: 'icon-chuhang', title: '出行' },
        { name: 'icon-cxdh', title: '出行导航' },
        { name: 'icon-daiban', title: '待办工作' },
        { name: 'icon-daohang', title: '导航' },
        { name: 'icon-falv', title: '法律' },
        { name: 'icon-fangchan', title: '房产' },
        { name: 'icon-gongzuozheng', title: '工作证' },
        { name: 'icon-gongan', title: '公安' },
        { name: 'icon-sheshi', title: '公共设施' },
        { name: 'icon-gongjijin', title: '公积金' },
        { name: 'icon-gjjcx', title: '公积金查询' },
        { name: 'icon-gonglve', title: '攻略' },
        { name: 'icon-goupiao', title: '购票' },
        { name: 'icon-guahao', title: '挂号' },
        { name: 'icon-gjzj', title: '国际证件' },
        { name: 'icon-gsd', title: '号码归属地' }
      ]
    };
  },
  created() {},
  methods: {}
};
</script>
<style lang="less" scoped>
.iconlist {
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  align-content: center;
  .single {
    margin-top: 20px;
    width: 20%;
    flex-direction: column;
    text-align: center;
    i {
      font-size: 36px;
    }
    p {
      width: 100%;
      font-size: 15px;
      margin: 0;
      padding: 0;
    }
  }
}
</style>
